Selainlaajennusten kehitys: Manifest V3:n ja JavaScript-rajapintojen hallinta

Selainlaajennukset tarjoavat tehokkaan tavan parantaa ja mukauttaa selauskokemusta. Ne antavat kehittäjille mahdollisuuden lisätä toiminnallisuutta verkkoselaimiin, olla vuorovaikutuksessa verkkosivujen kanssa ja integroitua verkkopalveluihin. Tämä opas tarjoaa kattavan yleiskatsauksen selainlaajennusten kehitykseen, keskittyen Manifest V3:een ja ydin-JavaScript-rajapintoihin, jotka antavat näille laajennuksille voiman.

Selainlaajennusten ymmärtäminen

Selainlaajennus on pieni ohjelmisto, joka laajentaa verkkoselaimen toiminnallisuutta. Laajennukset voivat muokata verkkosivuja, lisätä uusia ominaisuuksia ja integroitua ulkoisiin palveluihin. Ne on tyypillisesti kirjoitettu JavaScriptillä, HTML:llä ja CSS:llä, ja ne on pakattu ZIP-tiedostoon manifestitiedoston kanssa, joka kuvaa laajennuksen metatiedot ja luvat.

Suosittuja käyttökohteita selainlaajennuksille ovat:

• Mainostenesto-ohjelmat: Poistavat mainoksia verkkosivuilta.
• Salasanojen hallintaohjelmat: Tallentavat ja hallitsevat salasanoja turvallisesti.
• Tuottavuustyökalut: Parantavat työnkulkua ominaisuuksilla, kuten tehtävienhallinta ja muistiinpanot.
• Sisällön mukauttaminen: Muokkaavat verkkosivujen ulkoasua ja käyttäytymistä.
• Saavutettavuustyökalut: Parantavat verkon saavutettavuutta vammaisille käyttäjille.

Manifest V3: Uusi standardi

Manifest V3 on selainlaajennuksen manifestitiedoston uusin versio. Manifestitiedosto on JSON-tiedosto, joka kuvaa laajennuksen metatiedot, luvat ja resurssit. Se tuo merkittäviä muutoksia laajennusten kehitysprosessiin, keskittyen pääasiassa parannettuun turvallisuuteen, yksityisyyteen ja suorituskykyyn. Keskeisiä muutoksia Manifest V3:ssa ovat:

• Service Workerit: Korvaavat taustasivut service workereilla paremman suorituskyvyn ja pienemmän muistinkulutuksen saavuttamiseksi. Service workerit ovat tapahtumapohjaisia skriptejä, jotka ajetaan taustalla ja käsittelevät tapahtumia, kuten verkkopyyntöjä ja hälytyksiä.
• Declarative Net Request API: Korvaa estävän webRequest API:n Declarative Net Request API:lla verkkopyyntöjen suodattamiseen. Tämä parantaa yksityisyyttä ja turvallisuutta rajoittamalla laajennuksen pääsyä verkkoliikenteeseen.
• Content Security Policy (CSP): Ottaa käyttöön tiukemmat CSP-käytännöt mielivaltaisen koodin suorittamisen estämiseksi ja turvallisuusriskien pienentämiseksi.
• Manifestin versio: manifest_version-avaimen arvoksi manifest.json-tiedostossa on asetettava 3.

Siirtyminen Manifest V2:sta Manifest V3:een

Siirtyminen Manifest V2:sta Manifest V3:een vaatii huolellista suunnittelua ja koodimuutoksia. Tässä on vaiheittainen opas:

1. Päivitä manifestitiedosto: Aseta manifest_version arvoon 3 ja päivitä permissions- ja background-kentät vastaamaan Manifest V3:n vaatimuksia.
2. Korvaa taustasivut service workereilla: Kirjoita taustaskriptit uudelleen service workereiksi, käsittelemällä tapahtumia chrome.scripting- ja chrome.alarms-rajapinnoilla.
3. Siirry Declarative Net Request API:hin: Korvaa estävät webRequest-API-kutsut deklaratiivisilla säännöillä, jotka määritellään declarativeNetRequest-API:ssa.
4. Päivitä sisällön turvallisuuskäytäntö: Muokkaa content_security_policy-kenttää manifestitiedostossa vastaamaan tiukempia CSP-vaatimuksia.
5. Testaa perusteellisesti: Testaa laajennusta laajasti eri selaimissa varmistaaksesi yhteensopivuuden ja oikean toiminnallisuuden.

Esimerkki: Taustaskriptin siirtäminen Service Workeriksi

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Keskeiset JavaScript-rajapinnat selainlaajennuksille

Selainlaajennukset tukeutuvat joukkoon JavaScript-rajapintoja vuorovaikutuksessa selaimen ja verkkosivujen kanssa. Tässä on joitakin tärkeimmistä rajapinnoista:

1. chrome.runtime

chrome.runtime-rajapinta antaa pääsyn laajennuksen ajonaikaiseen ympäristöön. Se mahdollistaa laajennusten kommunikoinnin taustaskriptin kanssa, pääsyn manifestitiedostoon ja laajennuksen elinkaaren hallinnan.

Tärkeimmät metodit:

• chrome.runtime.sendMessage(): Lähettää viestin taustaskriptille tai muille laajennuksille.
• chrome.runtime.onMessage.addListener(): Kuuntelee viestejä muista skripteistä.
• chrome.runtime.getManifest(): Palauttaa laajennuksen manifestitiedoston JavaScript-objektina.
• chrome.runtime.reload(): Lataa laajennuksen uudelleen.

Esimerkki: Viestin lähettäminen sisältöskriptistä taustaskriptiin

Sisältöskripti (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Taustaskripti (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

chrome.storage-rajapinta tarjoaa mekanismin tietojen tallentamiseen ja hakemiseen laajennuksessa. Se tarjoaa sekä paikallisen että synkronoidun tallennusvaihtoehdon.

Tärkeimmät metodit:

• chrome.storage.local.set(): Tallentaa tiedot paikallisesti.
• chrome.storage.local.get(): Hakee tiedot paikallisesta tallennustilasta.
• chrome.storage.sync.set(): Tallentaa tiedot, jotka synkronoidaan käyttäjän laitteiden välillä.
• chrome.storage.sync.get(): Hakee tiedot synkronoidusta tallennustilasta.

Esimerkki: Tietojen tallentaminen ja hakeminen paikallisesta tallennustilasta

            // Tallenna tiedot
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Hae tiedot
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

chrome.tabs-rajapinta antaa laajennusten olla vuorovaikutuksessa selaimen välilehtien kanssa. Se tarjoaa metodeja välilehtien luomiseen, kyselyyn, muokkaamiseen ja sulkemiseen.

Tärkeimmät metodit:

• chrome.tabs.create(): Luo uuden välilehden.
• chrome.tabs.query(): Hakee välilehtiä, jotka vastaavat tiettyjä kriteerejä.
• chrome.tabs.update(): Päivittää välilehden ominaisuuksia.
• chrome.tabs.remove(): Sulkee välilehden.
• chrome.tabs.executeScript(): Suorittaa JavaScript-koodin välilehdessä.

Esimerkki: Uuden välilehden luominen

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

chrome.alarms-rajapinta antaa laajennusten ajastaa tehtäviä suoritettavaksi tiettyyn aikaan tai tietyn aikavälin jälkeen. Tämä on erityisen tärkeää Manifest V3:ssa, koska se korvaa ajastimien käytön taustasivuilla, joita ei enää tueta.

Tärkeimmät metodit:

• chrome.alarms.create(): Luo uuden hälytyksen.
• chrome.alarms.get(): Hakee olemassa olevan hälytyksen.
• chrome.alarms.clear(): Poistaa hälytyksen.
• chrome.alarms.getAll(): Hakee kaikki hälytykset.
• chrome.alarms.onAlarm.addListener(): Kuuntelee hälytystapahtumia.

Esimerkki: Hälytyksen luominen

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

chrome.scripting-rajapinta antaa laajennusten injektoida JavaScriptiä ja CSS:ää verkkosivuille. Tämä rajapinta on keskeinen osa Manifest V3:a, ja service workerit käyttävät sitä vuorovaikutukseen verkkosivujen kanssa niiden latauduttua.

Tärkeimmät metodit:

• chrome.scripting.executeScript(): Suorittaa JavaScript-koodin välilehdessä tai kehyksessä.
• chrome.scripting.insertCSS(): Lisää CSS:ää välilehteen tai kehykseen.

Esimerkki: JavaScriptin injektoiminen välilehteen

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

chrome.notifications-rajapinta antaa laajennusten näyttää ilmoituksia käyttäjälle. Tämä on hyödyllistä päivitysten, hälytysten ja muiden tärkeiden tietojen antamiseen.

Tärkeimmät metodit:

• chrome.notifications.create(): Luo uuden ilmoituksen.
• chrome.notifications.update(): Päivittää olemassa olevan ilmoituksen.
• chrome.notifications.clear(): Poistaa ilmoituksen.
• chrome.notifications.getAll(): Hakee kaikki ilmoitukset.

Esimerkki: Ilmoituksen luominen

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

chrome.contextMenus-rajapinta antaa laajennusten lisätä kohteita selaimen pikavalikkoon (hiiren oikean napin valikko). Tämä tarjoaa käyttäjille kätevän tavan päästä käsiksi laajennuksen toimintoihin suoraan verkkosivuilta.

Tärkeimmät metodit:

• chrome.contextMenus.create(): Luo uuden pikavalikon kohdan.
• chrome.contextMenus.update(): Päivittää olemassa olevan pikavalikon kohdan.
• chrome.contextMenus.remove(): Poistaa pikavalikon kohdan.
• chrome.contextMenus.removeAll(): Poistaa kaikki laajennuksen luomat pikavalikon kohdat.

Esimerkki: Pikavalikon kohdan luominen

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

chrome.i18n-rajapintaa käytetään laajennuksen kansainvälistämiseen, mikä tekee siitä saavutettavan eri kielillä ja alueilla oleville käyttäjille. Sen avulla voit tarjota lokalisoituja versioita laajennuksesi käyttöliittymästä ja viesteistä.

Tärkeimmät metodit:

• chrome.i18n.getMessage(): Hakee lokalisoidun merkkijonon laajennuksen _locales-hakemistosta.

Esimerkki: chrome.i18n:n käyttö lokalisointiin

Luo ensin _locales-hakemisto laajennuksesi juurikansioon. Luo sen sisään kielikohtaiset kansiot, kuten en, es, fr jne.

Luo jokaisen kielikansion sisään messages.json-tiedosto. Esimerkiksi _locales/en/messages.json-tiedostossa:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Sitten JavaScript-koodissasi:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Tulos: My Extension
console.log(greeting);      // Tulos: Hello, world!

            

              
                Copy
              
            
          

Selainyhteensopivuus

Vaikka Chrome on suosituin selain laajennuskehityksessä, on tärkeää ottaa huomioon selainyhteensopivuus. Myös Firefox, Safari ja muut selaimet tukevat laajennuksia, mutta niiden rajapinnat ja manifestiformaatit voivat hieman erota.

Varmistaaksesi selainyhteensopivuuden:

• Käytä WebExtensions API:a: WebExtensions API on standardoitu rajapinta selainlaajennusten kehitykseen, jota useat selaimet tukevat.
• Testaa eri selaimissa: Testaa laajennuksesi eri selaimissa yhteensopivuusongelmien tunnistamiseksi ja korjaamiseksi.
• Käytä polyfill-kirjastoja: Käytä polyfill-kirjastoja tarjotaksesi puuttuvaa API-toiminnallisuutta eri selaimissa.
• Ehdollinen koodi: Käytä ehdollista koodia mukautuaksesi selainkohtaisiin eroihin. Esimerkiksi: if (typeof browser === "undefined") { var browser = chrome; }

Parhaat käytännöt selainlaajennusten kehityksessä

Tässä on joitakin parhaita käytäntöjä, joita noudattaa selainlaajennuksia kehitettäessä:

• Minimoi käyttöoikeudet: Pyydä vain niitä käyttöoikeuksia, joita laajennuksesi ehdottomasti tarvitsee. Tämä parantaa käyttäjän yksityisyyttä ja turvallisuutta.
• Käytä turvallisia koodauskäytäntöjä: Noudata turvallisia koodauskäytäntöjä haavoittuvuuksien, kuten sivustojen välisen komentosarja-ajon (XSS) ja koodin injektoinnin, estämiseksi.
• Optimoi suorituskyky: Optimoi laajennuksesi suorituskyky minimoidaksesi sen vaikutuksen selaimen suorituskykyyn.
• Tarjoa selkeä ja ytimekäs dokumentaatio: Tarjoa selkeä ja ytimekäs dokumentaatio auttaaksesi käyttäjiä ymmärtämään, kuinka laajennustasi käytetään.
• Käsittele virheet siististi: Toteuta virheidenkäsittely estääksesi laajennuksesi kaatumisen tai odottamattoman käyttäytymisen.
• Pidä laajennuksesi ajan tasalla: Päivitä laajennustasi säännöllisesti korjataksesi bugeja, tietoturva-aukkoja ja yhteensopivuusongelmia.
• Harkitse kansainvälistämistä (i18n): Suunnittele laajennuksesi niin, että se on helposti lokalisoitavissa eri kielille. Käytä chrome.i18n-rajapintaa.
• Kunnioita käyttäjän yksityisyyttä: Ole läpinäkyvä sen suhteen, miten laajennuksesi kerää ja käyttää käyttäjätietoja, ja hanki käyttäjän suostumus tarvittaessa. Noudata asiaankuuluvia tietosuojasäännöksiä, kuten GDPR ja CCPA.

Laajennuksen lähettäminen kauppoihin

Kun laajennuksesi on kehitetty ja testattu, haluat lähettää sen selainten laajennuskauppoihin, jotta se on käyttäjien saatavilla. Jokaisella selaimella on oma kauppansa ja lähetysprosessinsa:

• Chrome Web Store: Lähetä laajennuksesi Chrome Web Storeen Chrome-käyttäjille. Prosessi sisältää kehittäjätilin luomisen, laajennuksen pakkaamisen ja sen lataamisen kauppaan.
• Firefox Add-ons: Lähetä laajennuksesi Firefox Add-ons -sivustolle Firefox-käyttäjille. Prosessi on samanlainen kuin Chrome Web Storessa ja sisältää kehittäjätilin luomisen ja laajennuksen lähettämisen tarkistettavaksi.
• Safari Extensions Gallery: Lähetä laajennuksesi Safari Extensions Galleryyn Safari-käyttäjille. Prosessi vaatii kehittäjäsertifikaatin hankkimisen Applelta ja laajennuksen lähettämisen tarkistettavaksi.

Kun lähetät laajennuksesi, muista antaa tarkat ja täydelliset tiedot, mukaan lukien kuvaava nimi, yksityiskohtainen kuvaus, kuvakaappaukset ja tietosuojakäytäntö. Laajennuskaupat tarkistavat lähetykset varmistaakseen, että ne noudattavat niiden käytäntöjä ja ohjeita.

Yhteenveto

Selainlaajennusten kehitys Manifest V3:n ja JavaScript-rajapintojen avulla tarjoaa tehokkaan tavan mukauttaa ja parantaa selauskokemusta. Ymmärtämällä ydinkäsitteet, noudattamalla parhaita käytäntöjä ja ottamalla huomioon selainyhteensopivuuden, kehittäjät voivat luoda arvokkaita ja mukaansatempaavia laajennuksia käyttäjille ympäri maailmaa. Verkon kehittyessä selainlaajennuksilla on jatkossakin tärkeä rooli internetin tulevaisuuden muovaamisessa.

Muista aina asettaa käyttäjän yksityisyys ja turvallisuus etusijalle laajennuksia kehittäessäsi. Rakentamalla näiden periaatteiden mukaisesti voit luoda laajennuksia, jotka ovat sekä hyödyllisiä että luotettavia.

Tämä opas tarjoaa vankan perustan selainlaajennusten kehityksen aloittamiseen. Syventyessäsi aiheeseen, tutustu erilaisiin saatavilla oleviin rajapintoihin ja ominaisuuksiin ja kokeile erilaisia tekniikoita luodaksesi innovatiivisia ja vaikuttavia laajennuksia.